<template>
  <div
    class="search-container"
    :style="route.path === '/' ? 'margin-top: 30px' : 'margin-top: 70px'"
    v-if="data?.length && data.length"
  >
    <Sort @sort="getData" />
    <template v-for="article in data">
      <ArticleCard :article="article" />
    </template>
  </div>
  <div v-else class="search-container">
    <h1 class="not-data">暂无数据，快来编写一下文章吧 ~</h1>
  </div>
</template>

<script lang="ts" setup>
import { ref, watch } from "vue";
import { useRoute } from "vue-router";
import { getSearchArticleService } from "@/service/article";

import ArticleCard from "@/components/ArticleCard/ArticleCard.vue";
import Sort from "@/components/Sort/Sort.vue";

import { IArticle } from "../Home/config";
const route = useRoute();
const data = ref<IArticle[]>([]);
const getData = async (current = 0) => {
  const res: any = await getSearchArticleService(
    route.query.key as string,
    current
  );
  data.value = res.data?.articles;
};
watch(
  () => route.path,
  () => {
    getData();
  },
  {
    deep: true,
    immediate: true
  }
);
</script>

<style lang="less" scoped>
.search-container {
  width: 100%;
  // margin: 20px 0;
  padding: 0 20px 15px;
  margin-left: -50px;
  .article-item:nth-child(2) {
    margin-top: 5px !important;
  }
}
</style>
